@import "./normalize.css"; //css初始化
@import "./elementUi/index.scss";

html {
  color: var(--main-color);
  font-family: var(--font-family);
  box-sizing: var(--box-sizing);
}

//常用css简写
.fl-r-c {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.fl-r {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.fl-r-e {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.fl-c {
  display: flex;
  flex-direction: column;
}
.fl-r-c,
.fl-r,
.fl-r-e,
.fl-c {
  &.between {
    justify-content: space-between;
  }
  &.center {
    justify-content: center;
  }
  &.wrap {
    flex-wrap: wrap;
  }
  &.end {
    justify-content: flex-end;
  }
}
.fl-1 {
  flex: 1;
}
.fw-b {
  font-weight: bold;
}
.fw-500 {
  font-weight: 500;
}
.fw-no {
  font-weight: normal;
}
.w-100 {
  width: 100%;
}
.h-100 {
  height: 100%;
}
.ml-auto {
  margin-left: auto;
}
.scroll {
  overflow: auto;
}
.scroll-x {
  overflow-x: auto;
}
.scroll-y {
  overflow-y: auto;
}
.hidden {
  overflow: hidden;
}

@for $i from 0 through 120 {
  .fs-#{$i} {
    font-size: 1px * $i;
  }
  .ml-#{$i} {
    margin-left: 1px * $i;
  }
  .mr-#{$i} {
    margin-right: 1px * $i;
  }
  .mt-#{$i} {
    margin-top: 1px * $i !important;
  }
  .mb-#{$i} {
    margin-bottom: 1px * $i;
  }
  .pt-#{$i} {
    padding-top: 1px * $i;
  }
  .pb-#{$i} {
    padding-bottom: 1px * $i;
  }
  .pl-#{$i} {
    padding-left: 1px * $i;
  }
  .pr-#{$i} {
    padding-right: 1px * $i;
  }
}

//圆角卡片
.card-box {
  background-color: var(--main-background);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

//内边距20圆角卡片
.card-box-20 {
  @extend .card-box;
  padding: 20px;
}
